<template>
  <div class="new-radio" v-if="data.length != 0">
    <h3 class="title">{{ title }}</h3>
    <div class="wrap">
      <div class="new-radio-info" 
        v-for="(item,index) in data" 
        :key="index">
        <img v-lazy="item.picUrl" alt="">
        <span>{{ item.name }}</span>
        <span>{{ item.rcmdtext }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      title: String,
      data:Array,
    }
  }
</script>

<style scoped>
.title{
  padding: 10px;
  border-bottom: 1px solid red;
}

.wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* align-items: center; */
  justify-items: center;
}

.new-radio-info{
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
  font-size: 13px;
}

.new-radio-info img{
  width: 100px;
  width: 100px;
}

</style>